@import "../base/fn";
.gas{
    @pup-color: #9329fa;
    @red-color:#fb0d48;
    .setTapColor();
    .summary {
        background: #fff;
        padding: 0px;
        .title {
            color: #000;
            padding:0 10px;
            text-align: left;
            font-size: 0.75rem;
            .btn{
                margin-left: 10px;
                padding: 2px 20px 2px 10px;
                background: @pup-color;
                font-size: 0.75rem;
                line-height: 1.4;
            }
            .more:before{
                right: 8px;
                border-color: #fff;
                height: 6px;
                width: 6px;
                margin-top: -4px;
            }
        }
        .weui-navbar {
            height: 42px;
            background: #fff;
            transition: .2s;
            position: fixed;
            .weui-navbar__item{
            }
            &.fix {
                position: fixed;
                height: 50px;
                .weui-navbar__item{
                    padding: 13px 0;
                    .icon{
                        height: 0;
                    }
                }
            }
        }
        .weui-navbar__item{
            transition: .2s;
            font-size: 0.8rem;
            .icon{
                display: block;
                img{
                    width: 50px;
                }
            }
        }
        .weui-navbar__item {
            &.weui-bar__item_on {
                color: @red-color;
                border-bottom: 2px solid @red-color;
            }
        }
	    .swiper-container{
	        padding-top: 42px;
		    .swiper-wrapper{
			    .swiper-slide{
			        text-align: left;
			        .money{
			            color:  @red-color;
			        }
			        .desc{
			            font-size: 0.75rem;
		                padding:6px 20px;
		                position: relative;
		                line-height: 1.5;
			        }
			        .btn_more{
			            color: #FFFFFF;
			            background: #5C2BE7;
                        padding: 0px 20px 0 14px;
                        font-size: 0.75rem;
                        border-radius: 3px;
                        line-height: 1.8;
                        margin-top:5px; 
			            
			             &:before {
                            content: " ";
                            .setArrow(right, 6px, #ffffff, 2px);
                            position: absolute;
                                top: 6px;
                                right: 10px;
                        }
			        }
			        .header{
			            text-align: right;
		                padding: 22px 10px;
			            .price{
			                text-align: left;
			                font-size: 1.2rem;
			            }
			            .buttons{
			                width: 130px;
			            }
			            .snumber{
			                width: 50px;
			                text-align: center;
                            .setTapColor();
                            outline: none;
                            background:  @red-color;
                            border: none;
                            color: #fff;    
                            padding: 4px 0;
                            border-radius: 3px;
			            }
			            .button{
			                width: 40px;
		                    text-align: center;
                            background: none;
                            border: none;
                            .setTapColor();
			            }
			        }
			        .baodian_ticket{
			            width: 80%;
		                margin: 10px auto;
		                text-align: center;
			        }
				    .levels{
			            padding-top: 0;
			            padding-bottom: 0.8rem;
			            margin-top: 0.5rem;
			            color: #ffffff;
			            font-size: 0.75rem;
			            .gradient(#ffac07,#ff0756);
			            .title_label{
			                margin-bottom: 10px;
			            }
			            h3{
			                padding-left: 10px;
			                color: #000000;
			                font-size: 1rem;
                            margin-bottom: 10px;
                            margin-top: 6px;
                            padding-right: 5px;
                            .more{
                                font-size: 0.8rem;
                                color: #000;
                                font-weight: 100;
                                &:before{
                                    border-color: #000000;
                                    height: 6px;
                                    width: 6px;
                                    right: 5px;
                                    font-weight: 100;
                                    border-width: 1px 1px 0 0;
                                    margin-top: -4px;
                                }
                            }
			            }
				        .subtitle{
				            background: @red-color;
		                    padding: 2px 5px 4px;
                            border-radius: 0px 6px 6px 0;
                            display: inline-block;
                            font-size: 1rem;
                            line-height: 2;
                            padding: 0 6px;    
                            color: #fff;
                            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.22);
				        }
				        .weui-flex{
				            padding: 0.6rem;
				            .level_0{
				                font-size: 1rem;
				                padding: 5px 8px;
				                color: #000000;
				            }
				             .level_1{
		                        background: rgba(0, 0, 0, 0.7);
                                padding: 5px 8px;
                                border-radius: 3px;
                                position: relative;
                                .panda{
                                    position: absolute;
                                    width: 90px;
                                    right: 5px;
                                    top: -55px;
                                }
                            }
				        }
				        .desc{
				            margin-bottom: 20px;
				            font-size: 0.9rem;
				        }
				        &+.levels{
				            margin-top: 0;
				        }
				        &.level_spr{
				            padding-top: 0.8rem;
                            background:#fff;
                            color: #000000;
				            ul{
				                display: flex;
				                flex-wrap:wrap;
				                li{
				                    list-style: none;
				                    border: none;
			                        text-align: center;
		                            width: 17%;
                                    text-align: center;
                                    padding: 0 1.5%;
			                        a{
			                            display: block;
			                            color: #000000;
			                            font-size: 0.7rem;
			                            img{
			                                border-radius: 10px;
			                            }
			                        }
				                }
				            }
				        }
				    }
			    }
		    }
	    }
    }
    .payment{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        z-index: 88;
        .money{
            font-size: 1.2rem;
            small{
                font-size: 0.7em;
                vertical-align: top;
            }
        }
        .weui-flex__item{
            padding-left: 20px;
            line-height: 1;
            padding-top: 5px;
        }
        .name{
            font-size: 0.75rem;
            padding-bottom: 3px;
        }
        .buttons{
            padding: 10px 30px;
            background: #f50625;
            color: #FFFFFF;
        }
        &:before{
            .setTopLine();
            z-index: 2;
        }
    }
}
.gift{
    .weui-panel__hd {
        font-size: 1rem;
        &:after {
            display: none;
        }
    }
    .weui-media-box_appmsg {
        .weui-media-box__hd{
            margin-right: 0.8rem;
            border-radius: 10px;
            overflow: hidden;
        }
        .weui-media-box__hd2{
            width: 60px;
            font-size: 0.75rem;
            margin-left: 0.8rem;
        }
    }
    .weui-tab__panel{
        padding-bottom: 10px;
        .weui-media-box{
            padding: 0.8rem 0.5rem;
            .weui-media-box__desc{
                color: #000000;
                .ellipsisLn(2);
            }
        }
    }
    .red{
        color: #F50625;
    }
}
.giftcontent{
    @cur-color:#5E1CFA;
    .weui-media-box_appmsg {
        .weui-media-box__hd{
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 20px;
        overflow: hidden;
    }}
    .weui-tab__panel{
        padding-bottom: 10px;
        .weui-media-box {
            h4{
                font-size: 1.5rem;
            }
            .tonji{
                font-size: 0.75rem;
                margin-top: 14px;
                text-align: center;
                color: #8c8c8c;
            }
            .btn{
                padding: 8px 0px;
                border-radius: 20px;
                line-height: 1;
                background: @cur-color;
                display: block;
            }
        }
    }
    .gift .weui-tab__panel;
    #tab_nav{
        box-shadow: 0px 6px 10px 0px rgba(12, 12, 12, 0.07);
        li{
            list-style: none;
            text-align: center;
            padding-bottom: 3px;
            a{
                color: #000000;
                font-size: 0.8rem;
                padding: 4px 5px;
            }
            &.cu{
                a{
                    border-bottom: 2px solid @cur-color;
                    color: @cur-color;
                }
            }
        }
    }
    #tab_content{
        padding: 10px;
        font-size: 0.75rem;
        >div{
            display: none;
        }
    }
    #content{
        display: none;
    }
}
.purchased{
    @red-color:#821fd1;
    background: #F1F1F1;
    .weui-navbar{
        position: fixed;
    }
    .weui-navbar__item{
        transition: .2s;
        font-size: 0.8rem;
        .icon{
            display: block;
            img{
                width: 50px;
            }
        }
    }
    .weui-navbar__item {
        &.weui-bar__item_on {
            color: @red-color;
            border-bottom: 2px solid @red-color;
        }
    }
    .weui-tab__panel {
        padding-top: 70px;
        .weui-media-box{
            margin: 0 1rem;
            background: #fff;
            border: none;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0px 7px 9px 0px rgba(0, 0, 17, 0.08);
        }
    }
    .weui-media-box__hd{
        width: 100px;
        padding-right: 0.8rem;
        position: relative;
        &:after{
            .setRightLine();
        }
    }
    .weui-cell_access {
        .weui-cell__ft:after{
            height: 8px;
            width: 8px;
        }
    }
    .used{
        align-self: flex-start;
        margin: .4rem 0 0 0;
        width: 4.8rem;
        height: 1.8rem;
        background: #fff;
        line-height: 1.8rem;
        text-align: center;
        font-size: .8rem;
        color: #9a9da2;
        border: 1px solid #afb0b4;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
            display: block;
            width: 8px;
            height: 8px;
            border-right: 1px solid #9a9da2;
            border-top: 1px solid #9a9da2;
            transform: rotate(45deg);
        }
    }
    .empty_data{
        display: none;    
        text-align: center;
        background: #fff;
        padding: 2rem 1rem;
        margin: 1rem;
        margin-top: 0;
        border-radius: 10px;
        font-size: 0.8rem;
        box-shadow: 0px 7px 9px 0px rgba(0, 0, 17, 0.08);
        .desc{
            color: #333333;
            margin-top: 1rem;
        }
    }
}
